<template>
  <div class="layout-col bs flex1 mb15">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30">
          <img class="hh100" src="@/assets/images/tibi-ico.png" />
        </div>
        <span class="f15 fw ml8">实时监控</span>
      </div>
      <span v-if="!state.empty" class="flex-cc i21 cursor" @click="toPath('/new', {type: state.current.type})">
        <span>详情</span>
        <i-ep-arrowRightBold class="f12"/>
      </span>
    </div>
    <div class="flex1 layout-col pplr6 ppt6 ppb3" v-show="!state.empty">
      <div class="flex-sc ww100 pplr8 ppb8 tc">
        <img class="w50" src="@/assets/images/d1.png" v-if="state.current.type == 'access_ctrl'" />
        <img class="w50" src="@/assets/images/d2.png" v-else-if="state.current.type == 'camera'" />
        <img class="w50" src="@/assets/images/d3.png" v-else-if="state.current.type == 'TH'" />
        <img class="w50" src="@/assets/images/d4.png" v-else-if="state.current.type == 'smoke'" />
        <img class="w50" src="@/assets/images/d5.png" v-else-if="state.current.type == 'water_immersion'" />
        <img class="w50" src="@/assets/images/f1.png" v-else-if="state.current.type == 'air_conditioner'" />
        <img class="w50" src="@/assets/images/d7.png" v-else-if="state.current.type == 'SF6_O2'" />
        <img class="w50" src="@/assets/images/d8.png" v-else-if="state.current.type == 'noise'" />
        <img class="w50" src="@/assets/images/f8.png" v-else-if="state.current.type == 'EICollector'" />
        <img class="w50" src="@/assets/images/f7.png" v-else-if="state.current.type == 'switch'" />
        <img class="w50" src="@/assets/images/d9.png" v-else-if="state.current.type == 'PD_high_lora'" />
        <img class="w50" src="@/assets/images/f10.png" v-else-if="state.current.type == 'PD_JC_CSB'" />
        <img class="w50" src="@/assets/images/f11.png" v-else-if="state.current.type == 'pd_3in1'" />
        <img class="w50" src="@/assets/images/f11.png" v-else-if="state.current.type == 'PD_JC_CSB_CYG'" />
        <img class="w50" src="@/assets/images/f12.png" v-else-if="state.current.type == 'DLQ_SENSOR'" />
        <img class="w50" src="@/assets/images/d10.png" v-else />
        <div class="flex-sc flex1 ppl8 f12">
          <div class="layout-col flex1">
            <span class="mb15">{{state.form.name?state.form.name:''}}</span>
            <span class="f18 i21 fw">{{state.form.count?state.form.count:0}}</span>
          </div>
          <div class="layout-col flex1">
            <span class="mb15 i3">·<span class="mr4">在线</span></span>
            <span class="f18 white fw">{{state.form.online?state.form.online:0}}</span>
          </div>
          <div class="layout-col flex1">
            <span class="mb15 i8">·<span class="mr4">告警</span></span>
            <span class="f18 white fw">{{state.form.isAlarm?state.form.isAlarm:0}}</span>
          </div>
        </div>
      </div>
      <div class="ti-theng">
        <span>数据监控</span>
        <span :class="state.current.isAlarm > 0 ?'i8':'i21'" class="ml5" v-if="state.current[state.code]">{{Math.round(state.current[state.code]*100)/100}} {{state.dw}}</span>
      </div>
      <div class="flex1 ww100" id="Line_l"></div>
    </div>
    <div v-if="state.empty" class="flex1 tc flex-cc">设置实时曲线</div>
  </div>
</template>

<script lang="ts" setup>
import ec from "@/utils/chart";
const { drawChart } = ec();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
const state = reactive({
  ...publicStore.$state,
  dw: '',
  currentId: '',
  code: ''
});
let exposeRef = $ref()

const init = async() => {
  await nextTick()
  await getInit()
}

const getInit = async() => {
  let query = {"o": "o_sensor_cfg_property", "i": 2, "p": [publicStore.distributId,"order"]}
  let params = {queryApi: query}
  let res = await publicStore.post(params)
  state.empty = proxy.isNull(res)? true : false
  if (state.empty) return console.log('配置order')
  state.current = publicStore._public.sensorList.find(a=>a.id == res[0].sensor_id)
  state.form = publicStore._public.countList.find(a=>a.type == state.current.type)
}

watch(() => state.current.timestamp, async (val) => {
  await nextTick();
  if(state.currentId != state.current.sensor_id){
    state.list = []
    state.currentId = state.current.sensor_id
  }
  state.code = findPropertyValue(state.current, 'vc_')
  state.dw = findPropertyValue(state.current, 'dw_')
  let markValue = [proxy.parseTime(state.current.timestamp, '{m}-{d} {h}:{i}:{s}'), state.current[state.code], state.current.timestamp, state.code]
  state.list.push(markValue)
  let data = setData(state.list)
  let cfg = {chart_type: 0, dw: state.dw, legendArr: [''], name: '', min: state.current.min? state.current.min : 0, max: state.current.max? state.current.max : 100}
  Line(data, cfg)
},{ immediate: false, deep: true });

const Line = async (data, cfg) => {
  let series = [{data}]
  drawChart("Line", "Line_l", cfg, {series: series, xAxis: {type: 'category', boundaryGap: false}});
};

const setData = (list) => {
  let data = []
  list.forEach(v => {
    if(data.length>=20){
      data.shift()
      data.push(v)
    }else{
      data.push(v)
    }
  })
  return data
}

const findPropertyValue = (obj, startsWith) => {
  let result
  Object.keys(obj).some(key => {
    if (key.startsWith(startsWith)) {
      result = obj[key];
      return true;
    }
  });
  return result
}

defineExpose({
  init
})

</script>

<style scoped lang="scss">
.ti-theng {
  width: 248px;
  height: 32px;
  background: linear-gradient(
    90deg,
    rgba(12, 1, 67, 0) 0%,
    #242dab 51%,
    rgba(12, 1, 67, 0) 100%
  );
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
</style>
